<template>
  <div class="Wxjl_add">
    <!-- 第一行 -->
    <el-row>
      <el-col>
        <div class="header_title">新增维修记录</div>
      </el-col>
    </el-row>
    <!-- 内容 -->
    <!-- 内容 -->
    <div class="content_add">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="addWxjlData"
      >
<!--         <el-form-item label="维修单号">
          <el-input
            v-model="addWxjlData.id"
            placeholder="请输入维修单号"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="装备名称">
          <el-select
            v-model="addWxjlData.equipmentName"
            clearable
            placeholder="请输入装备名称"
            style="width: 400px"
          >
            <el-option label="重型坦克" value="重型坦克"></el-option>
            <el-option label="轻型坦克" value="轻型坦克"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="装备编号">
          <el-input
            v-model="addWxjlData.equipmentNumber"
            placeholder="请输入装备编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="维修状态">
          <el-select
            v-model="addWxjlData.testStatus"
            placeholder="请输入维修状态"
            clearable
            style="width: 400px"
          >
            <el-option label="维修完成" value="1"></el-option>
            <el-option label="待维修" value="2"></el-option>
            <el-option label="维修中" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="addWxjlData.startTime"
            style="width: 400px"
            value-format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="addWxjlData.overTime"
            style="width: 400px"
            clearable
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="故障描述">
          <el-input
            v-model="addWxjlData.desc"
            placeholder="请输入故障描述"
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="addBtnGroup">
          <el-button class="cancelBtn" @click="cancelInfo">取消</el-button>
          <el-button type="primary" @click="addInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      labelPosition: "left",
      addWxjlData: {
        // code: "",
        equipmentName: "",
        equipmentNumber: "",
        testStatus: "",
        startTime: "",
        overTime: "",
        desc: "",
      },
    };
  },
  methods: {
    // 添加信息
    addInfo: function () {
      this.$axios({
        url: "/keepRecord/addRecord",
        method: "post",
        data:this.addWxjlData
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
            console.log(res)
          // this.$message.success("添加成功");
          this.$router.push("/home/Wxjl");
        } else {
            console.log(res)
          this.$message.error("添加失败");
        }
      });
    },
    // 取消
    cancelInfo: function () {
      this.$router.push("/home/Wxjl");
    },
  },
};
</script>

<style lang="less" scoped>
.Wxjl_add {
  width: 100%;
  height: 100%;
  //   background: aquamarine;

  .el-col {
    margin-top: 20px;
    padding-left: 30px;
    min-width: 1440px;
  }
  .header_title {
    height: 40px;
    width: 100%;
    font-size: 24px;
    line-height: 40px;
    color: #344563;
    font-weight: bolder;
  }
  //   .content_add{
  //     width: 100%;
  //     font-size: 20px;
  //   }
  .el-form {
    height: 360px;
    width: 1300px;
    font-size: 20px;
    margin-top: 40px;
    margin-left: 40px;
    position: relative;

    // background: yellow;

    .el-form-item {
      width: 580px;
      float: left;
      padding: 20px 20px 20px 0px;
      margin: 0;
    }
    .label {
      color: red;
    }
    .el-input {
      width: 400px;
      height: 40px;
      line-height: 40px;
      // border: 1px solid red;
    }
    .el-input__inner {
      width: 190px;
    }

    .addBtnGroup {
      text-align: center;
      position: absolute;
      bottom: -260px;
      left: 280px;

      .el-button {
        background-color: #6554c0;
        color: #fff;
        width: 150px;
        height: 50px;
        font-size: 20px;
        margin-right: 50px;
      }
      .cancelBtn {
        background-color: #fff;
        color: #7161c5;
        border: 1px solid #6a5ac2;
      }
    }
  }
}
</style>